<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- react.js react的核心库 提供各种class与api -->
    <script src="../react/react17.development.js"></script>
    <!-- react-dom.js react操作dom的核心库 -->
    <script src="../react/react-dom17.development.js"></script>
</head>

<body>
    <button></button>
    <div class="box"></div>
</body>
<script>
    // var p = document.createElement('p');
    // console.log(p); //dom对象  | 标签对象

    // var but = document.querySelector('button');
    // console.log(but); // dom对象  | 标签对象

    // var b = $('button');
    // b = $('<li></li>');
    // console.log(b);

    // React.createElement(标签名称，标签属性，标签内容1，标签内容2)

    var span = React.createElement('span', null, '内容');
    console.log(span);//react对象 | 标签对象


    var p = React.createElement('p', null, span);

    var box = document.querySelector('.box');
    // 将创建的react对象 渲染到box这个标签内 box这个标签是一个dom标签
    ReactDOM.render(p, box);





/* 
        this指向 （this都是在函数中使用的，this指向调用函数的对象）
            全局函数中  指向window
            事件函数中  指向 调用事件的标签对象
            构造函数中   指向 当前实例对象
            箭头函数中   指向 创建当前箭头函数的作用域中this


    class类


    es6
        let const
        模板字符串
        解构赋值
        promise
        扩展符
        map set symbol
        class 与 继承
        proxy
        模块化
        


*/
</script>